import React,{Component} from 'react'
import { List, InputItem,TextareaItem,Picker,Button, Toast } from 'antd-mobile';
import { createForm } from 'rc-form';

class MyForm extends Component{
    componentDidMount() {
      this.username.focus();
    }
    handleClick = () => {
      //表单整体提交，验证是否有错误
      this.props.form.validateFields((error, values) => {
        if (!error) {
          Toast.info('成功',2)
          console.log('error', error, values)
        } else {
          Toast.info('失败',2)
          console.log('error', error, values)
        }
      })
    }
    //显示点击错误图标的提示信息
    errorClick = (fieldName) => {
        Toast.info(this.props.form.getFieldError(fieldName),2);
    }
    render() {
      const { getFieldProps,getFieldError } = this.props.form;
      const district = [
        {value:'e1',label:'疑似火灾'},
        {value:'e2',label:'火灾'},
        {value:'e3',label:'人身意外'},
        {value:'e4',label:'电梯故障'},
        {value:'e5',label:'爆炸物'},
      ]
      return (
        <div>
          <List renderHeader={() => '请将您看到的紧急情况留言，谢谢合作'}>
            <InputItem
                {...getFieldProps('username',{rules: [
                  {required: true,message:"用户名必填"},
              ]})}
              clear
              placeholder="请输入用户名"
              ref={el => this.username = el}
              error={getFieldError('username')?true:false}
              onErrorClick={this.errorClick.bind(this,'username')}
            >用户名</InputItem>
            <InputItem
              {...getFieldProps('tel',{rules: [
                {validator(rule, value, callback, source, options){
                  // test if tel already exists in a database
                  // and add a validation error to the errors array if it does
                    let errors = [];
                    const isPhone = /^[1][3,4,5,7,8][0-9]{9}$/;//手机号码
                    if(!isPhone.test(value)){
                        callback("电话号码格式不正确");
                    }else{
                        //callback传空数组就是验证通过
                        callback(errors);
                    }
                }}
              ]})}
              clear
              placeholder="请输入电话号码"
              ref={el => this.tel = el}
              error={getFieldError('tel')?true:false}
              onErrorClick={this.errorClick.bind(this,'tel')}
            >电话号码</InputItem>
            <Picker data={district} cols={1} {...getFieldProps('emrg_type')} className="forss">
              <List.Item arrow="horizontal">紧急情况类型(可选)</List.Item>
            </Picker>
            <TextareaItem
              {...getFieldProps('content',{rules: [
                {required: true,message:"留言内容必填"},
              ]})}
              title="留言内容"
              rows={7}
              ref={el => this.content = el}
              placeholder="请输入留言内容"
              error={getFieldError('content')?true:false}
              onErrorClick={this.errorClick.bind(this,'content')}
            />
            <List.Item.Brief>
              <Button type="warning" onClick={this.handleClick} className="info-submit-button">提交</Button>
            </List.Item.Brief>
          </List>
        </div>
      );
    }
}

export default createForm()(MyForm)